<template>
	<view class="mainpadding">
		<!-- 举报原因弹出层 -->
		<u-picker @cancel="jbshow=false" keyName="name" @confirm="jbconfirm" :show="jbshow" :columns="jbcolumns"
			title="选择举报原因" confirmColor="#2ACC9C"></u-picker>
		<view class="titletext">举报原因</view>
		<input type="text" class="inputs margin_top" placeholder="简要描述你要举报的内容" v-model="msgs">
		<view class="flexbetween liushi">
			<view class="notitletext">举报原因选择</view>
			<view class="flexleft" @click="jbyy">
				<view class="huisetext">{{yuanyin || '请选择举报原因'}}</view>
				<view class="rticon"></view>
			</view>
		</view>
		<view class="notitletext liushi">上传图片</view>
		<view class="flexleft mainpadding2">
			<view class="tupianbox flexcenter margin_top" v-for="(item,index) in upImg" :key="index">
				<view class="tupian radius">
					<image class="radius upimage" :src="item" mode=""></image>
					<image class="shanchu" src="../../static/image/system/shanchu.png" @click="deleimgae(index)"
						mode=""></image>
				</view>
			</view>
			<view class="tupianbox flexcenter margin_top" @click="uploadImg" v-if="upImg.length>=3?false:true">
				<view class="tupian shangchuan radius">
					<image src="../../static/image/system/shangchuan.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="dibuboxs" @click="jubtj">
			<view class="dibubtn">提交</view>
		</view>
	</view>
</template>
<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				//举报弹出层内容
				jbshow: false,
				//举报内容
				jbcolumns: [],
				upImg: [],
				msgs: "",
				yuanyin: "",
				yuanyinid: "",
				jshiids: ""
			}
		},
		onLoad(jpp) {
			this.jshiids = jpp.jishiid;
			console.log(this.jshiids, 9998)
		},
		methods: {
			uploadImg() {
				let _this = this;
				let upImgs = _this.upImg;
				let num = 3 - upImgs.length;
				if (num <= 0) {
					return false;
				}
				uni.showActionSheet({
					itemList: ['相机', '相册'],
					success: function(res) {
						console.log(res)
						// 选择相机走0
						if (res.tapIndex == 0) {
							httpRequest.chooseImage(num, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], _this.upImg)
								}
							}).catch(err => {});
						}
						// 选择相册走1
						if (res.tapIndex == 1) {
							httpRequest.chooseImage(num, ['album']).then(res => {
								for (var i = 0; i < res.length; i++) {
									console.log(res[i])
									_this.uploadImageService(res[i], _this.upImg)
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {}
				});
			},
			// 详情转载
			uploadImageService(url, upImg) {
				// console.log(url,888)
				let _this = this;
				httpRequest.uploadFile('common/upload', url).then(res => {
					let image_item = res.fullurl;
					upImg.push(image_item);
				}).catch(err => {});
			},
			//举报原因
			jbyy() {
				this.jbshow = true
				httpRequest.request('feedback/feedback_type', 'POST', {}, false, false, true).then(res => {
					let aa = []
					aa.push(res.data)
					this.jbcolumns = aa
					// this.jbcolumns = res.data
				})
			},
			
			// 举报提交
			jubtj() {
				if(this.msgs==""){
					httpRequest.toast("请输入举报原因")
					return false
				}
				if(this.yuanyinid==""){
					httpRequest.toast("请选择举报原因")
					return false
				}
				httpRequest.request('feedback/feedback', 'POST', {
					forum_id: this.jshiids,
					content: this.msgs,
					images: this.upImg,
					feedback_type_id: this.yuanyinid
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						setTimeout(() => {
							uni.navigateBack(1)
						}, 1000)
					}
				})
			},
			// 举报确认
			jbconfirm(e) {
				this.jbshow = false
				console.log(e)
				this.yuanyin = e.value[0].name
				this.yuanyinid = e.value[0].id
			},
			deleimgae(index) {
				this.upImg.splice(index, 1)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.flexleft {
		flex-wrap: wrap;
	}

	.shangchuan {
		width: 175rpx;
		height: 183rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.tupianbox {
		// margin-right: 30rpx;
		width: 33.33%;
	}

	.tupian {
		position: relative;
		width: 175rpx;
		height: 183rpx;

		.upimage {
			width: 100%;
			height: 100%;
		}
	}

	.shanchu {
		width: 31rpx;
		height: 30rpx;
		position: absolute;
		left: 45%;
		bottom: -7%;
	}

	.liushi {
		margin-top: 60rpx;
	}

	.inputs {
		border-bottom: 1rpx solid #999999;
		padding: 9rpx 0 9rpx 30rpx;
	}

	.huisetext {
		margin-right: 6rpx;
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #999999;
	}
</style>
